<template>
  <el-container style="height: 100%;background-color: #C0C4CC">
    <el-aside width="20%" style="height: 100%;margin-left: 2%;margin-top: 2%">
        <el-card style="height: 800px;">
            <strong style="font-size: 20px;margin-left: 1%">联系人</strong>
          <el-scrollbar style="height: 800px">
            <el-row class="tac" style="width: 500px;margin-top: 4%">
              <el-col :span="12">
                <el-menu
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                  <el-submenu v-for="(info, index) in contacts.keys()" :index="index + ''">
                    <template slot="title">
                      <i class="el-icon-user-solid"></i>
                      <span>{{info}}</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item @click="toContact(info1)"  v-for="(info1, index1) in contacts.get(info)" :index="index1 + '' + index">{{info1.fullName}}</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-card>
    </el-aside>
    <el-container>
      <el-header><div style="font-size: 20px;margin-left: 46%;margin-top: 2%">{{contactName}}</div></el-header>
      <el-main>
        <el-card style="height: 80%; margin-top: -4%;">
          <el-scrollbar style="height:660px;margin-top: 2%" ref="myScrollbar">
            <div v-for="(info) in messages" style="width: 100%; margin-top: 1%">
              <div v-if="username == info.username" style="width: 50%;margin-left: 42%">
                <el-avatar size="small" :src="userAvatar" style="margin-left: 100%;margin-bottom: -2%"> </el-avatar>
                <el-card style="margin-right: 1%;">
                  {{info.text}}
                </el-card>
              </div>
              <div v-if="username != info.username" style="width: 50%;margin-right: 2%">
                <el-avatar size="small" :src="avatar" style="margin-bottom: -1%"> </el-avatar>
                <el-card style="margin-left: 4%; background-color: #8c939d">
                  {{info.text}}
                </el-card>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-main>
      <el-footer>
        <div style="width: 80%; margin-top: -1%;margin-left: 10%">
          <el-input
              type="textarea"
              :rows="1"
              placeholder="请输入内容"
              v-model="text" style="width: 92%;">
          </el-input>
          <el-button type="primary" style="float: right;" size="small" @click="send()">发送</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {getUsers, getUsers1} from "../../network/Details/personal/personal";
export default {
  name: "Charts",
  data(){
    return {
      username: window.sessionStorage.getItem('username'),
      text:'',
      avatar: 'https://bk-xy.oss-cn-hangzhou.aliyuncs.com/avatar/0cc893f339084d5ca22293d02ce672bfxy.jpg',
      userAvatar: this.$store.state.ossBaseUrl + window.sessionStorage.getItem('avatar'),
      toUsername: '',
      dialogTableVisible: false,
      contacts: new Map(),
      messages:[],
      contactName:'',
      nameMap: new Map(),
      ws:null
    }
  },
  methods: {

    // 发送消息
    send(){
       if(this.toUsername != ''){
         const mes = {username: this.username, text: this.text}
         this.messages.push(mes)
         // 构造请求参数
         const mes1 = {username: this.toUsername, text: this.text}
        // 使用websocket 发送信息
         this.ws.send(JSON.stringify(mes1))
         this.text = ''
         this.scrollDown()
       }
    },
    scrollDown() {
      this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toContact(user){
      if(this.messages.length > 0){
        window.localStorage.setItem(this.toUsername, JSON.stringify(this.messages))
        this.messages.splice(0,this.messages.length)
      }
      this.contactName = user.fullName
      this.avatar =  this.$store.state.ossBaseUrl + user.avatar
      this.toUsername = user.username
      if(JSON.parse(window.localStorage.getItem(this.toUsername)) != null){
        this.messages = JSON.parse(window.localStorage.getItem(this.toUsername))
      }
    }
  },
  created() {
    const _this = this
    const h = this.$createElement;
    console.log(window.sessionStorage.getItem("roleId"))
    if(window.sessionStorage.getItem("roleId") == 1){
      getUsers(this.username).then(res => {
        _this.contacts = new Map(Object.entries(res.data));
        for(let item of _this.contacts.values()){
          for(let item1 of item){
            _this.nameMap.set(item1.username, item1.fullName)
          }
        }
      })
    }else{
      getUsers1(this.username).then(res => {
        _this.contacts = new Map(Object.entries(res.data));
        for(let item of _this.contacts.values()){
          for(let item1 of item){
            _this.nameMap.set(item1.username, item1.fullName)
          }
        }
      })
    }

    this.ws = this.$ws.ws
    this.ws.onmessage = function (evt){
      const es = JSON.parse(evt.data)
      if(_this.toUsername != '' && _this.toUsername == es.username) {
        _this.messages.push({username:es.username, text: es.text})
        console.log("mes1:")
        console.log(_this.messages)
      }else{
        _this.$notify({
          title: _this.nameMap.get(es.username) + '',
          message: h('i', { style: 'color: teal'}, '发来了一条消息')
        });
       var cs = window.localStorage.getItem(es.username)
        cs = JSON.parse(cs)
        if(cs == null){
          cs = []
        }
        cs.push({username:es.username, text: es.text})
        window.localStorage.setItem(es.username, JSON.stringify(cs))
        console.log("mes:")
        console.log(_this.messages)
      }
    }
  },
  beforeDestroy(){
    if(this.messages.length > 0 && this.toUsername != ''){
      window.localStorage.setItem(this.toUsername, JSON.stringify(this.messages))
      this.messages.splice(0,this.messages.length)
    }
    this.toUsername = ''
  }
}
</script>

<style scoped>
.item:hover {
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: Transparent;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-container{
  width: 1200px;
  margin: auto;
}
.css-au84nr-Rank {
  font-size: 14px;
  line-height: 20px;
  min-width: 10px;
  font-family: TypoRound;
  font-style: italic;
  font-weight: 700;
  transform: translateY(1px);
  color: rgba(255,161,22, 1);
}
.css-fyk6rv-layer1-CardContainer:hover {
  background: rgba(	126, 126, 126, 0.04);
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.1),0px 2px 8px rgba(0,0,0, 0.08);
  user-select: none;
  padding: 16px 16px 4px;
}
.css-fyk6rv-layer1-CardContainer {
  padding: 16px 16px 4px;
}
.cd .cd:active, .cd:hover, .cd:focus {
  color: rgba(65,145,255, 1);
  text-decoration: none;
}
.cd {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
</style>
